<template>
  <van-sticky>
    <van-nav-bar
      title="我的"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>
  <div class="content">
    <van-row>
      <van-col span="10" style="text-align: center; padding: 10px">
        <van-image
          round
          width="2rem"
          height="2rem"
          style="margin: 0 auto"
          :src="userInfo.avatar || defaultImg"
          @click="show = true"
        />
        <PhotoUpload v-model:show="show"></PhotoUpload>
      </van-col>
      <van-col span="14" class="user-info">
        <div class="info-name">{{ userInfo.realName || userInfo.name }}</div>
        <div class="info-post">
          {{ isEnterprise ? '员工' : userInfo.postName }}
        </div>
        <div class="info-tenant">{{ userInfo.tenantName }}</div>
      </van-col>
    </van-row>
  </div>
  <div class="title">事务中心</div>
  <div style="background-color: white">
    <van-grid :border="false">
      <van-grid-item @click="toTodo">
        <img class="grid-img" src="./img/warning@2x.png" alt="" />
        <!-- <van-badge
          class="me-badge"
          max="99"
          :content="todoQty2"
        /> -->
        <div class="grid-content">
          {{
            userInfo.postName !== '学生' && !isEnterprise
              ? '待办事项'
              : '我的测评'
          }}
        </div>
      </van-grid-item>
      <van-grid-item @click="toReserve">
        <img class="grid-img" src="./img/order@2x.png" alt="" />
        <div class="grid-content">
          {{ order }}
        </div>
      </van-grid-item>
      <van-grid-item @click="toConsult">
        <img class="grid-img" src="./img/consult@2x.png" alt="" />
        <div class="grid-content">
          {{ consult }}
        </div>
      </van-grid-item>
      <van-grid-item
        v-if="
          userInfo.postName !== '学生' &&
          userInfo.postName !== '家长' &&
          userInfo.postName !== '任课老师' &&
          userInfo.postName !== '心理专家' &&
          !isEnterprise
        "
        @click="toBoard"
      >
        <img class="grid-img" src="./img/evaluation@2x.png" alt="" />
        <div class="grid-content">数据看板</div>
      </van-grid-item>
      <van-grid-item
        v-if="userInfo.postName == '领导' && isEnterprise"
        @click="toBoard"
      >
        <img class="grid-img" src="./img/evaluation@2x.png" alt="" />
        <div class="grid-content">数据看板</div>
      </van-grid-item>
      <van-grid-item
        v-if="userInfo.postName == '心理专家'"
        @click="toConsultManage"
      >
        <img class="grid-img" src="./img/evaluation@2x.png" alt="" />
        <div class="grid-content">咨询师</div>
      </van-grid-item>
    </van-grid>
  </div>
  <div class="title">个人中心</div>
  <div style="background: white">
    <van-grid :border="false" ::column-num="4">
      <van-grid-item
        v-for="(item, index) in personal"
        :key="index"
        @click="toJump(item)"
      >
        <img class="grid-img2" :src="item.img" alt="" />
        <div class="grid-content">{{ item.title }}</div>
      </van-grid-item>
    </van-grid>
  </div>
  <div style="margin-bottom: 60px">
    <van-collapse
      v-model="activeNames"
      :accordion="true"
      @change="collapseChange"
    >
    </van-collapse>
    <van-button type="default" block @click="logout">退出</van-button>
    <Feedback ref="refFeedback"></Feedback>
  </div>
</template>

<script lang="ts">
import Feedback from './aboutMe/feedback/index.vue'
import { getUserInfo, refreshTodoData } from '/@/util/business-util'
import { useRouter } from 'vue-router'
import { defineComponent, ref, Ref, watch, computed, onBeforeMount } from 'vue'
import { useStore } from '/@/store'
import { removeToken, removeUser } from '/@/util/auth'
import PhotoUpload from './photo-upload.vue'
import { useLoginer } from '/@/use/loginer'
import { useUserInfo, useUserprojectgauge, getProjectList } from './me'
import { personal } from './data'

export default defineComponent({
  components: { PhotoUpload, Feedback },
  setup() {
    const { commit, state } = useStore()
    const router = useRouter()
    const activeNames = ref('')
    const refFeedback: Ref = ref(null)
    const collapseStatus: any = ref({}) // 是否已经展开过 {'2': true}
    let todoQty: any = computed(() => state.todoData.qty) // 待办数量

    // 返回 Promise
    const asyncBeforeRead = (file: any) => {
      return new Promise((resolve, reject) => {
        const img = new File(['foo'], 'bar.jpg', {
          type: 'image/jpeg',
        })
      })
    }
    const show = ref(false)

    const { userInfo, defaultImg } = useUserInfo({ show })

    const { projectList } = useUserprojectgauge({ userInfo })

    const isEnterprise = computed(() => {
      return state.enterprise.includes(userInfo.value.tenantId)
    })

    onBeforeMount(async () => {
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
      refreshTodoData(commit, userInfo.value, state) // 刷新待办事项数量
    })

    let todoQty2: any = ref('')

    watch(
      () => [userInfo.value, state.todoData.qty],
      () => {
        if (
          userInfo.value.postName !== '学生' &&
          userInfo.value.postName !== '家长' &&
          userInfo.value.postName !== '任课老师'
        ) {
          todoQty2.value = state.todoData.qty
        }
      }
    )

    const order = computed(() => {
      if (userInfo.value.postName == '心理专家') {
        return '预约管理'
      } else {
        return '我的预约'
      }
    })

    const consult = computed(() => {
      if (userInfo.value.postName == '心理专家') {
        return '咨询管理'
      } else {
        return '我的咨询'
      }
    })

    const { isEducation, isSchool } = useLoginer()

    return {
      personal,
      isEnterprise,
      isEducation,
      order,
      consult,
      refFeedback,
      defaultImg,
      asyncBeforeRead,
      userInfo,
      todoQty,
      todoQty2,
      show,
      projectList,
      collapseStatus,
      activeNames,
      onClickLeft() {
        history.back()
      },
      toJump(item: any) {
        if (!item.router) return
        if (item.router == 'feedback') {
          refFeedback.value.show()
          return
        }

        router.push({
          name: item.router,
        })
      },
      logout() {
        removeToken()
        removeUser()
        router.push({
          name: 'Login',
        })
      },
      collapseChange(activeNames: string) {
        collapseStatus.value[activeNames] = true
      },
      // 工作台
      toTodo() {
        router.push({
          name: 'Todo',
          query: {},
        })
      },
      // 咨询记录
      toConsult() {
        if (userInfo.value.postName == '心理专家') {
          router.push({
            name: 'RecordsConsult',
          })
        } else {
          router.push({
            name: 'consult',
          })
        }
      },
      // 测评记录
      toEvaluation() {
        router.push({
          name: 'evaluation',
        })
      },
      toReserve() {
        if (userInfo.value.postName == '心理专家') {
          router.push({
            name: 'ReleaseManege',
          })
        } else {
          router.push({
            name: 'order',
          })
        }
      },
      toBoard() {
        let name = ''
        if (isEducation.value) {
          name = 'BoardEducationBureau'
        }

        if (isSchool.value) {
          name = 'BoardSchool'
        }
        router.push({
          name,
        })
      },
      //咨询师
      toConsultManage() {
        router.push({
          name: 'consultManage',
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;

  .van-progress {
    flex: 1;
  }
}

.content {
  background-color: white;
  margin-bottom: 0;

  .user-info {
    font-size: 12px;
    padding: 5px;

    .info-name {
      font-size: 14px;
      height: 35%;
    }

    .info-post {
      height: 25%;
      color: #999;
    }

    .info-tenant {
      height: 40%;
      color: #999;
    }
  }
}

.me-badge {
  position: absolute;
  top: 5px;
  right: 15px;
}

.title {
  font-size: 15px;
  text-indent: 15px;
  padding: 10px 0;
  color: #646566;
}

.grid-img {
  width: 35px;
}

.grid-img2 {
  width: 20px;
}

.grid-content {
  font-size: 12px;
  margin-top: 5px;
  color: #646566;
}

/deep/ .van-cell__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/deep/ .van-cell-group--inset {
  margin: 0;
}
</style>
